<script setup>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { getNotice } from "@/api/system/notice";
import { useRoute } from "vue-router";
const props = defineProps({
  noticeId: {
    type: Number,
  },
});
const route = useRoute();

const data = reactive({
  notice: {},
});
const { notice } = toRefs(data);
const loadNotice = async () => {
  const res = await getNotice(route.query.noticeId);
  notice.value = res.data;
};
loadNotice();
</script>
<template>
  <div class="notice">
    <div class="n-header">
      <h3 class="n-title">{{ notice.noticeTitle }}</h3>
      <div class="n-sub-desc">
        <div>
          <span>创建时间：</span>
          <span>{{ notice.createTime }}</span>
        </div>
        <div>
          <span>发布人：</span>
          <span>{{ notice.remark }}</span>
        </div>
        <div>
          <span>更新时间：</span>
          <span>{{ notice.updateTime || "--" }}</span>
        </div>
      </div>
    </div>
    <div class="n-content">
      <div class="ql-container ql-snow">
        <div class="ql-editor" v-html="notice.noticeContent"></div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.notice {
  margin-top: 20px;
  background: #fff;
  padding: 20px 40px;
  margin-bottom: 20px;
  .n-header {
    padding: 10px 0;
    border-bottom: 3px solid #1aa684;
    text-align: center;
    .n-title {
      font-size: 26px;
      color: #1aa684;
      padding: 10px 0;
      // font-weight: 600;
    }
    .n-sub-desc {
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        font-size: 14px;
        color: #666;
      }
    }
  }
  .n-content {
    min-height: 400px;
    margin-top: 10px;
    // padding: 20px 10px;
  }
}
</style>
